<script setup>
// 导入Vue的ref和onMounted函数
import { ref, onMounted } from 'vue';
// 导入商品相关的API接口
import { showApi } from '@/api/category';

// 定义响应式变量tableData，用于存储表格数据
const tableData = ref([]);
// 定义响应式变量expandedKeys，用于存储展开行的key值
const expandedKeys = ref([]);

// 处理表格行展开/收起事件的函数
// row: 当前行数据
// expandedRows: 当前所有展开的行数据数组
const handleExpandChange = (row, expandedRows) => {
    // 如果当前行在展开的行数组中
    if (expandedRows.includes(row)) {
        // 将当前行的id添加到展开keys数组中
        expandedKeys.value.push(row.id);
    } else {
        // 否则从展开keys数组中移除当前行的id
        expandedKeys.value.splice(expandedKeys.value.indexOf(row.id), 1);
    }
};

// 定义响应式变量data，用于存储原始树形数据
const data = ref([]);

// 定义树形组件的属性配置
const defaultProps = {
    children: 'children', // 指定子节点字段名为'children'
    label: 'name',        // 指定节点标签字段名为'name'
};

// 获取商品数据的异步函数
const show = async () => {
    // 调用API获取数据
    const res = await showApi();
    // 将获取到的数据赋值给data变量
    data.value = res;
    // 将获取到的数据赋值给tableData变量，用于表格展示
    tableData.value = res;
};

// 在组件挂载时执行show函数获取数据
onMounted(() => {
    show();
});

// 处理编辑操作的函数
// row: 当前行数据
const handleEdit = (row) => {
    // 在控制台打印编辑的行数据
    console.log('Edit row: ', row);
};

// 处理删除操作的函数
// row: 当前行数据
const handleDelete = (row) => {
    // 在控制台打印删除的行数据
    console.log('Delete row: ', row);
};

// 生成行索引的函数
// row: 当前行数据
// rowIndex: 当前行索引
const getRowIndex = (row, rowIndex) => {
    // 如果当前行没有parentIndex属性（即为顶级节点）
    if (!row.parentIndex) {
        // 返回行索引+1（从1开始计数）
        return rowIndex + 1;
    }
    // 如果有parentIndex，则返回父级索引.当前索引+1的格式（如1.1, 1.2）
    return `${row.parentIndex}.${rowIndex + 1}`;
};
</script>

<template>
    <!-- <div>
        <el-table :data="tableData" style="width: 100%" row-key="id" border :load="load"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="name" label="商品类别" />
            <el-table-column prop="createBy" label="创建人" />
            <el-table-column prop="createTime" label="创建时间" />
        </el-table>
    </div> -->

    <div>
        <el-table :data="tableData" style="width: 100%" :expand-row-keys="expandedKeys" row-key="id"
            @expand-change="handleExpandChange">
            <el-table-column type="index" label="#" width="50" fixed />
            <el-table-column prop="name" label="商品类别">
                <template #default="{ row, $index }">
                    <span v-if="!row.children || row.children.length === 0">
                        {{ row.name }}
                    </span>
                    <span v-else>
                        <span>{{ row.name }}</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="creator" label="创建人" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column fixed="right" label="操作" width="150">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="handleEdit(row)">修改</el-button>
                    <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style>
/* 自定义树节点样式 */
.custom-tree-node {
    flex: 1;
    /* 占据剩余空间 */
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: space-between;
    /* 两端对齐 */
    font-size: 14px;
    /* 字体大小 */
    padding-right: 8px;
    /* 右侧内边距 */
}

/* 文件夹图标样式 */
.folder-icon::before {
    content: "\e71f";
    /* FontAwesome文件夹图标Unicode */
    margin-right: 5px;
    /* 右侧外边距 */
}
</style>